@import './vw';
@import './common1';

.content{
    &::after,&::before{
        content: "";
        display: block;
        visibility: hidden; 
    }
    &::before{
        height: vw(90);
    }
    &::after{
        height: vw(96);
    }
    .banner{
        position: relative;
        >img{
            width: 100%;
            height: vw(356);
        }
        .mask{
            width: 100%;
            height: vw(107);
            position: absolute;
            background-color: rgba(0,0,0,.5);
            left: 0;
            bottom: 0;
            padding: vw(18) 0  vw(24) vw(29);
            p{
                font-size: vw(28);
                line-height: vw(44);
                color: white;
            }
            span{
                font-size: vw(16);
                line-height: vw(20);
                color: white;
                img{
                    margin-bottom: vw(-6);
                }
            }
            span:nth-of-type(1){
                img{
                    width: vw(26);
                    height: vw(25);
                }
            }
            span:nth-of-type(2){
                img{
                    width: vw(21);
                    height: vw(25);
                }
                margin-left: vw(10);
            }
        }
    }

    .grey-bg{
        height: vw(25);
        background-color: #f5f5f5;
    }

    .kimin-box{
        
        .kimin-content{
            width: vw(584);
            margin: vw(24) auto 0;
            .kimin-head{
                width: 100%;
                height: vw(120);
                padding-bottom: vw(11);
                box-sizing: border-box;
                display: flex;
                justify-content: space-between;
                border-bottom: 1px solid #e2e2e2;
                .kimin-left{
                    width: vw(244);
                    // height: vw(97);
                    display: flex;
                    flex-wrap: wrap;
                    align-content: space-between;
                    .kimin-ltop{
                        width: vw(244);
                        height: vw(58);
                        display: flex;
                        justify-content: space-between;
                        img{
                            width: vw(58);
                            height: vw(58);
                        }
                        .kimin-lcontent{
                            width: vw(167);
                            // height: vw(48);
                            display: flex;
                            flex-wrap: wrap;
                            align-content: space-between;
                            h1{
                                height: vw(23);
                                color: #c5c5c5;
                                flex-basis: 100%;
                            }
                            span{
                                font-size: vw(18);
                                color: #c5c5c5;
                            }
                        }
                        
                    }
                    p{
                        font-size: vw(25);
                    }
                }
                .kimin-right{
                    width: vw(228);
                    display: flex;
                    align-content: space-between;
                    justify-content: flex-end;
                    flex-wrap: wrap;
                    .arrow{
                        width: vw(227);
                        height: vw(58);
                        line-height: vw(58);
                        text-align: center;
                        // position: relative;
                        background-color: #b20000;
                        font-size: vw(28);
                        color: white;
                        .arrow-border{
                            position: relative;
                            top: vw(18);
                            display: inline-block;
                            width: vw(25);
                            height: vw(25);
                            border-radius: 50%;
                            background-color: white;
                            
                            
                            i{
                                color: #f20000;
                                font-weight: 900;
                                // position: absolute;
                                // left: 0;
                                // top: 0;
                                font-size: vw(31);
                                position: relative;
                                bottom: vw(15);
                                right: vw(3);
                            }
                        }    
                    }
                    span{
                        display: block;
                        font-size: vw(16);
                        
                        text-align: right;

                    }
                }
            }
            >img{
                width: 100%;
                height: vw(431);
                margin-top: vw(12);
            }
        }
    
        
    }

    
}
